<template>
	<div class="flex" style="border-left: 1px #eaeaea solid; border-bottom: 1px #eaeaea solid; border-right: 1px #eaeaea solid;">

    <div class="zuobian" style="width: 380px; height: calc(100vh - 105px); border-right:1px #eaeaea solid; overflow: auto; position: relative;">
     <div style="height: 50%; overflow: auto; border-bottom: 5px rgb(234, 234, 234) solid; padding: 20px;">

        <el-tree  class="filter-tree" @node-click="handleNodeClick" :data="data" :props="defaultProps" node-key="treeId"
                  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
        </el-tree>
      </div>
      <div style="position: absolute; left: 0; bottom: 0; background: #fff; width: 100%; height: calc(50% - 10px); overflow: auto;">
        <div>
          <el-table  ref="multipleTable"  :data="tableData"  tooltip-effect="dark"  style="width: 100%"  @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column prop="time" label="采样时间"></el-table-column>
              <el-table-column prop="zhi" label="采样值"></el-table-column>
              <el-table-column prop="hao" label="仪器序列号"></el-table-column>
              <el-table-column prop="beizhu" label="备注"></el-table-column>
            </el-table>
        </div>
      </div>
    </div>

    <div class="youbian" style="padding: 20px; width: calc(100vw - 680px);">
      <div>
        <el-button type="primary" @click='ditong'>低通滤波器</el-button>
        <el-button type="primary" @click='gaotong'>高通滤波器</el-button>
        <el-button type="primary" @click='daitong'>带通滤波器</el-button>
      </div>

      <div id="mainzcl" style="width: 1000px; height: 500px;"></div>
    </div>



    <el-dialog title="瀑布图分析设置" center :visible.sync="yunxingzhuansulog" width="900px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <div>测试数据共有16000个</div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">段数据长度</div>
        <div><el-input v-model="yunxingzhuansuall.shu" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
      </div>
      <div class="flexc" style="margin-bottom: 20px;">
        <div style="width: 100px; text-align: right;">间隔时间</div>
        <div><el-input v-model="yunxingzhuansuall.shijian" style="width: 250px; margin-left: 30px;" placeholder="请输入运行转速"></el-input></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" @click="shiyuzhibiaolog = false">取消</el-button>
        <el-button type="primary" @click="qie">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  import testarr from '@/common/testarr'
  import * as echarts from 'echarts';
  import { gettree,gettreecedian,gettreeshebei } from '@/api/xitong'
	export default {
		name: 'left',
		data() {
			return {
        data:[],
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        yunxingzhuansulog:false,
        yunxingzhuansulog2:false,
        yunxingzhuansulog3:false,
        yunxingzhuansuall:{
          shu:0,
          shijian:0
        },

        tableData:[
          {
            time:'2024-5-21',
            zhi:"12123",
            hao:"12123",
            beizhu:"123123"
          }
        ],


        menuVisible: false,

        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[],

        myChart:"",
        testarrx:[],
        testarry:[],
        testtitle:[],

        tuarr:""

			}
		},
		created() {

      this.getlist()
		},
		mounted() {
      this.tuarr = testarr
      this.shengchengtu()
		},
		methods: {
      ditong:function(){

        // 使用示例
        const sampleRate = 44100;
        const cutoffFrequency = 1000; // 低通截止频率
        const alpha = 1.0 - Math.exp(-2 * Math.PI * cutoffFrequency / sampleRate);

        const lowPassFilter = this.createLowPassFilter(alpha);
        this.tuarr = testarr.map(lowPassFilter);

        this.shengchengtu()
      },
      //低通滤波器
      createLowPassFilter:function(alpha) {
          let previousOutput = 0;
          return function(sample) {
              const output = alpha * sample + (1 - alpha) * previousOutput;
              previousOutput = output;
              return output;
          };


      },
      gaotong:function(){

        // 使用示例
        const sampleRate = 44100; // 采样率
        const cutoffFrequency = 1000; // 高通截止频率
        const highPassFilter = this.createHighPassFilter(cutoffFrequency, sampleRate);

        this.tuarr = testarr.map(highPassFilter);
        this.shengchengtu()
      },
      //高通滤波器
      createHighPassFilter:function(cutoffFrequency, sampleRate) {
          // 计算alpha值，它是高通滤波器的系数
          // 注意：这里的计算方式可能因滤波器的具体实现而异
          const alpha = Math.exp(-2 * Math.PI * cutoffFrequency / sampleRate);

          let previousInput = 0;
          let previousOutput = 0;

          return function(sample) {
              // 一阶高通滤波器的差分方程
              const output = sample - alpha * previousOutput - (1 - alpha) * previousInput;
              previousInput = sample;
              previousOutput = output;

              return output;
          };

          // 3、带通滤波器
          // // 你需要为高通和低通滤波器选择适当的截止频率

          // // ... 初始化高通和低通滤波器 ...

          // // 对信号首先应用高通滤波器，然后应用低通滤波器
          // const bandPassFilteredSignal = signal
          //     .map(highPassFilter) // 先应用高通滤波器
          //     .map(lowPassFilter); // 再应用低通滤波器（这里lowPassFilter的截止频率应小于高通滤波器的截止频率）
      },
      daitong:function(signal){

        let sampleRate = 44100;
        let cutoffFrequency = 1000;
        let alpha = 1.0 - Math.exp(-2 * Math.PI * cutoffFrequency / sampleRate);

        let lowPassFilter = this.createLowPassFilter(alpha);
        let highPassFilter = this.createHighPassFilter(cutoffFrequency, sampleRate);

        this.tuarr = testarr.map(highPassFilter).map(lowPassFilter)
        this.shengchengtu()

      },

      qie:function(){
        if(this.yunxingzhuansuall.shu){
          let f = parseInt(16000 / this.yunxingzhuansuall.shu)

          for(let i = 0; i <= this.yunxingzhuansuall.shu; i++){
            this.testarrx.push(i)
          }

          for(let i = 0; i <= f; i++){
            // this.testarrx.push("x轴名字" + i)
            this.testtitle.push("第几段" + i)
            let arr = testarr.slice(i * this.yunxingzhuansuall.shu, this.yunxingzhuansuall.shu * (i + 1))

            this.testarry.push({
              name: "第几段" + i,
              type: 'line',
              stack: 'Total',
              data: arr
            })
          }

          // this.testarry = testarr.slice(0,this.yunxingzhuansuall.shu)
          this.yunxingzhuansulog = false
          this.shengchengtu()
        }
      },
      yunxingzhuansushow:function(){
        this.yunxingzhuansulog = true
      },
      yunxingzhuansushow2:function(){
        this.yunxingzhuansulog2 = true
      },
      yunxingzhuansushow3:function(){
        this.yunxingzhuansulog3 = true
      },
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },

      handleSelectionChange:function(){

      },
      shengchengtu:function(){

          this.option = {
            // toolbox: {
            //         feature: {
            //             contextMenu: {
            //                 // 自定义右键菜单项
            //                 itemList: ['saveAsImage', 'dataView', 'restore', 'dataZoom', 'magicType']
            //             }
            //         }
            //     },
            title: {
              text: '测点图'
            },
            tooltip: {
              trigger: 'axis'
            },
            // legend: {
            //   data: ['测点1', '测点2', '测点3', '测点4', '测点5']
            // },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            toolbox: {
              feature: {
                saveAsImage: {}
              }
            },
            xAxis: {
              type: 'category',
              boundaryGap: false
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                data: this.tuarr
              }
            ]
          };

          if(this.myChart){
            this.myChart.setOption(this.option);
          }else{
            var chartDom = document.getElementById('mainzcl');
            this.myChart = echarts.init(chartDom);
            this.myChart.setOption(this.option);

            var that = this
            chartDom.addEventListener('contextmenu', function(event) {

                event.preventDefault();

                that.menuPosition.x = event.clientX;
                that.menuPosition.y = event.clientY;
                that.menuVisible = true;

                console.log(that.menuVisible)

                document.addEventListener('click', that.closeMenu);
            });
          }

      },


      handleCommand:function(val){
        this.youjiandangqian = ''
        // switch (val){
        //   case 'addzuzhi':
        //     this.addzuzhi()
        //     break;
        //   case 'addshebei':
        //     this.addshebei()
        //     break;
        //   case 'dingyizu':
        //     this.$router.push('/xitong/dingyizu')
        //     break;
        //   case 'tuku':
        //     this.$router.push('/xitong/tuku')
        //     break;
        // }
      },


      handleNodeExpand(data, node, instance) {

        // 当节点展开时，将节点的 key 添加到 expandedKeys 数组中
        this.zhankaiarray.push(data.treeId);
        console.log(this.zhankaiarray)
      },
      handleNodeCollapse(data, node, instance) {
        // 当节点折叠时，将节点的 key 从 expandedKeys 数组中移除
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
        console.log(this.zhankaiarray)
      },
      handleNodeClick(data) {
        // this.menuVisible = false;
        // console.log(this.menuVisible)

        // this.$store.commit('changeshowwho',"")
        // this.$nextTick(()=>{
        //   this.$store.commit('changeshowwho',data)
        //   console.log(this.$store.state.showwho)
        // })

      },
      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
      getlist:function(){
        gettree().then(response => {
          this.data = response.data
        })
      }
		}
	}
</script>


<style scoped lang="less">

  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }

</style>
